
<section data-ng-controller="SignInController">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <!-- local auth -->
            <h1>Log In</h1>
            <form name="loginForm" novalidate mi-submit="login()">
                <div class="alert alert-danger" id="error-box" ng-show="isLoginError">
                    <span ng-bind="loginError"></span>
                </div>
                <div class="form-group"
                     ng-class="{'has-error':(loginForm.username | shouldDisplayError:loginForm)}">
                    <label for="username">Username</label>
                    <span ng-show="loginForm.username.$error.required" ng-model="usernameError" style="margin-left:5px;">*</span>
                    <input type="text" name="username" id="username" placeholder="input username..."
                           class="form-control" ng-model="session.username" required mi-check-username/>
                <span class="help-block" ng-show="loginForm.username | shouldDisplayError:loginForm:'required'">
                    Please input your username
                </span>
                </div>
                <div class="form-group"
                     ng-class="{'has-error':(loginForm.password | shouldDisplayError:loginForm)}">
                    <label for="password">Password</label>
                    <span ng-show="loginForm.password.$error.required"> *</span>
                    <input type="password" name="password" id="password" placeholder="input password..."
                           class="form-control" ng-model="session.password" required/>
                <span class="help-block" ng-show="loginForm.password | shouldDisplayError:loginForm:'required'">
                    Please input your password
                </span>
                </div>
                <button type="submit" class="btn btn-primary" value="Login" title="Login">Login</button>
            </form>
            <hr/>
            <a href="/recovery">Forgot your account?</a><br/>
            <a href="/signup">Create an account</a>
        </div>
        <div class="col-xs-12 col-md-6">
            <!-- oauth -->
            <!-- google -->
            <a href="/auth/google" data-ng-click="oauthLogin('google')">
                <img height="70" width="350" src="img/oauth/google.png" style="margin-top:20px;"/>
            </a>
            <!-- facebook -->
            <a href="/auth/facebook" data-ng-click="oauthLogin('facebook')">
                <img height="70" width="350" src="img/oauth/facebook.png" style="margin-top:20px;"/>
            </a>
        </div>
    </div>
</section>
